<template>
  <div class="admin-page">
    <div class="admin-layout">
      <!-- 左侧菜单栏 -->
      <aside class="admin-sidebar">
        <div class="sidebar-header">
          <h3>管理面板</h3>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          background-color="#f5f7fa"
          @select="onMenuSelect"
        >
          <el-menu-item index="users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="roles">
            <el-icon><Key /></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="permissions">
            <el-icon><Lock /></el-icon>
            <span>权限管理</span>
          </el-menu-item>
        </el-menu>
      </aside>

      <!-- 右侧内容区域 -->
      <main class="admin-main">
        <!-- 用户管理 -->
        <div v-if="activeMenu === 'users'" class="content-section">
          <div class="section-header">
            <h2>用户管理</h2>
            <el-button type="primary" @click="showCreateUserDialog">
              <el-icon><Plus /></el-icon>
              添加用户
            </el-button>
          </div>
          
          <!-- 用户列表 -->
          <el-card class="content-card" shadow="never">
            <el-table
              :data="users"
              v-loading="usersLoading"
              style="width: 100%"
            >
              <el-table-column prop="user_id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" />
              <el-table-column prop="email" label="邮箱" />
              <el-table-column prop="role_name" label="角色">
                <template #default="scope">
                  <el-tag :type="scope.row.role_name === 'admin' ? 'danger' : 'info'">
                    {{ scope.row.role_name === 'admin' ? '管理员' : '普通用户' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="is_active" label="状态">
                <template #default="scope">
                  <el-tag :type="scope.row.is_active ? 'success' : 'danger'">
                    {{ scope.row.is_active ? '正常' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="created_time" label="创建时间">
                <template #default="scope">
                  {{ formatDate(scope.row.created_time) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button
                    v-if="scope.row.user_id !== userStore.user?.user_id"
                    size="small"
                    @click="editUser(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-if="scope.row.user_id !== userStore.user?.user_id"
                    size="small"
                    type="danger"
                    @click="deleteUser(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="pagination.page"
                v-model:page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="loadUsers"
                @current-change="loadUsers"
              />
            </div>
          </el-card>
        </div>

        <!-- 角色管理 -->
        <div v-if="activeMenu === 'roles'" class="content-section">
          <div class="section-header">
            <h2>角色管理</h2>
            <el-button type="primary" @click="showCreateRoleDialog">
              <el-icon><Plus /></el-icon>
              添加角色
            </el-button>
          </div>
          
          <el-card class="content-card" shadow="never">
            <el-table :data="roles" style="width: 100%">
              <el-table-column prop="role_id" label="ID" width="80" />
              <el-table-column prop="role_name" label="角色名称" />
              <el-table-column prop="role_description" label="描述" />
              <el-table-column prop="created_time" label="创建时间">
                <template #default="scope">
                  {{ formatDate(scope.row.created_time) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="editRole(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deleteRole(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>

        <!-- 权限管理 -->
        <div v-if="activeMenu === 'permissions'" class="content-section">
          <div class="section-header">
            <h2>权限管理</h2>
            <el-button type="primary" @click="showCreatePermissionDialog">
              <el-icon><Plus /></el-icon>
              添加权限
            </el-button>
          </div>
          
          <el-card class="content-card" shadow="never">
            <el-table :data="permissions" style="width: 100%">
              <el-table-column prop="permission_id" label="ID" width="80" />
              <el-table-column prop="permission_name" label="权限名称" />
              <el-table-column prop="permission_description" label="描述" />
              <el-table-column prop="created_time" label="创建时间">
                <template #default="scope">
                  {{ formatDate(scope.row.created_time) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="editPermission(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deletePermission(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </main>
    </div>
    
    <!-- 创建/编辑用户对话框 -->
    <el-dialog
      v-model="userDialog.visible"
      :title="userDialog.isEdit ? '编辑用户' : '创建用户'"
      width="500px"
    >
      <el-form
        ref="userFormRef"
        :model="userDialog.form"
        :rules="userDialog.rules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username" v-if="!userDialog.isEdit">
          <el-input v-model="userDialog.form.username" placeholder="请输入用户名" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userDialog.form.email" type="email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password" v-if="!userDialog.isEdit">
          <el-input
            v-model="userDialog.form.password"
            type="password"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>
        
        <el-form-item label="角色" prop="role_id">
          <el-select v-model="userDialog.form.role_id" placeholder="请选择角色">
            <el-option
              v-for="role in roles"
              :key="role.role_id"
              :label="role.role_name === 'admin' ? '管理员' : '普通用户'"
              :value="role.role_id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态" prop="is_active" v-if="userDialog.isEdit">
          <el-switch
            v-model="userDialog.form.is_active"
            active-text="正常"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDialog.visible = false">取消</el-button>
          <el-button type="primary" :loading="userDialog.loading" @click="saveUser">
            {{ userDialog.isEdit ? '更新' : '创建' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

         <!-- 创建/编辑角色对话框 -->
     <el-dialog
       v-model="roleDialog.visible"
       :title="roleDialog.isEdit ? '编辑角色' : '创建角色'"
       width="600px"
     >
       <el-form
         ref="roleFormRef"
         :model="roleDialog.form"
         :rules="roleDialog.rules"
         label-width="80px"
       >
         <el-form-item label="角色名称" prop="role_name">
           <el-input v-model="roleDialog.form.role_name" placeholder="请输入角色名称" />
         </el-form-item>
         <el-form-item label="描述" prop="role_description">
           <el-input v-model="roleDialog.form.role_description" type="textarea" placeholder="请输入角色描述" />
         </el-form-item>
         <el-form-item label="权限设置">
           <div class="permissions-section">
             <div class="permissions-header">
               <span>为该角色分配权限：</span>
               <el-button 
                 size="small" 
                 type="primary" 
                 link 
                 @click="toggleAllPermissions"
               >
                 {{ allPermissionsSelected ? '取消全选' : '全选' }}
               </el-button>
             </div>
             <div class="permissions-grid">
               <el-checkbox
                 v-for="permission in permissions"
                 :key="permission.permission_id"
                 v-model="roleDialog.form.selectedPermissions"
                 :label="permission.permission_id"
                 class="permission-item"
               >
                 <div class="permission-content">
                   <div class="permission-name">{{ permission.permission_name }}</div>
                   <div class="permission-desc">{{ permission.permission_description }}</div>
                 </div>
               </el-checkbox>
             </div>
           </div>
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="roleDialog.visible = false">取消</el-button>
           <el-button type="primary" :loading="roleDialog.loading" @click="saveRole">
             {{ roleDialog.isEdit ? '更新' : '创建' }}
           </el-button>
         </span>
       </template>
     </el-dialog>

    <!-- 创建/编辑权限对话框 -->
    <el-dialog
      v-model="permissionDialog.visible"
      :title="permissionDialog.isEdit ? '编辑权限' : '创建权限'"
      width="500px"
    >
      <el-form
        ref="permissionFormRef"
        :model="permissionDialog.form"
        :rules="permissionDialog.rules"
        label-width="80px"
      >
        <el-form-item label="权限名称" prop="permission_name">
          <el-input v-model="permissionDialog.form.permission_name" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="描述" prop="permission_description">
          <el-input v-model="permissionDialog.form.permission_description" type="textarea" placeholder="请输入权限描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialog.visible = false">取消</el-button>
          <el-button type="primary" :loading="permissionDialog.loading" @click="savePermission">
            {{ permissionDialog.isEdit ? '更新' : '创建' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, User, Key, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { authService } from '@/services/auth'

export default {
  name: 'AdminPanel',
  components: {
    Plus, User, Key, Lock
  },
  setup() {
    const userStore = useUserStore()
    const userFormRef = ref()
    const usersLoading = ref(false)
    const users = ref([])
    const roles = ref([])
    const permissions = ref([]) // Added permissions state
    
    // 分页
    const pagination = reactive({
      page: 1,
      pageSize: 10,
      total: 0
    })
    
    // 用户对话框
    const userDialog = reactive({
      visible: false,
      isEdit: false,
      loading: false,
      form: {
        username: '',
        email: '',
        password: '',
        role_id: 2,
        is_active: true
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 50, message: '用户名长度在3到50个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码至少需要6个字符', trigger: 'blur' }
        ],
        role_id: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      }
    })
    
    // 当前编辑的用户
    const currentEditUser = ref(null)
    
    // 当前激活的菜单项
    const activeMenu = ref('users')

    // 菜单选择事件
    const onMenuSelect = (index) => {
      activeMenu.value = index
    }
    
    // 加载用户列表
    const loadUsers = async () => {
      try {
        usersLoading.value = true
        const response = await authService.admin.getUsers({
          page: pagination.page,
          page_size: pagination.pageSize
        })
        
        users.value = response.users
        pagination.total = response.total
        
      } catch (error) {
        ElMessage.error('加载用户列表失败')
      } finally {
        usersLoading.value = false
      }
    }
    
    // 加载角色列表
    const loadRoles = async () => {
      try {
        const response = await authService.admin.getRoles()
        roles.value = response
      } catch (error) {
        ElMessage.error('加载角色列表失败')
      }
    }

    // 加载权限列表
    const loadPermissions = async () => {
      try {
        const response = await authService.admin.getPermissions()
        permissions.value = response
      } catch (error) {
        ElMessage.error('加载权限列表失败')
      }
    }

          // 角色对话框
      const roleDialog = reactive({
        visible: false,
        isEdit: false,
        loading: false,
        form: {
          role_name: '',
          role_description: '',
          selectedPermissions: []
        },
        rules: {
          role_name: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          role_description: [
            { required: true, message: '请输入角色描述', trigger: 'blur' }
          ]
        }
      })

    // 权限对话框  
    const permissionDialog = reactive({
      visible: false,
      isEdit: false,
      loading: false,
      form: {
        permission_name: '',
        permission_description: ''
      },
      rules: {
        permission_name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        permission_description: [
          { required: true, message: '请输入权限描述', trigger: 'blur' }
        ]
      }
    })

          // 全选权限计算属性
      const allPermissionsSelected = computed(() => {
        return permissions.value.length > 0 && 
               roleDialog.form.selectedPermissions.length === permissions.value.length
      })

      // 切换全选权限
      const toggleAllPermissions = () => {
        if (allPermissionsSelected.value) {
          roleDialog.form.selectedPermissions = []
        } else {
          roleDialog.form.selectedPermissions = permissions.value.map(p => p.permission_id)
        }
      }

      // 获取角色的权限
      const getRolePermissions = async (roleId) => {
        try {
          const response = await authService.admin.getRolePermissions(roleId)
          return response.map(p => p.permission_id)
        } catch (error) {
          console.error('获取角色权限失败:', error)
          return []
        }
      }

      // 显示创建角色对话框
      const showCreateRoleDialog = () => {
        roleDialog.isEdit = false
        roleDialog.form = {
          role_name: '',
          role_description: '',
          selectedPermissions: []
        }
        roleDialog.visible = true
      }

    // 显示创建权限对话框
    const showCreatePermissionDialog = () => {
      permissionDialog.isEdit = false
      permissionDialog.form = {
        permission_name: '',
        permission_description: ''
      }
      permissionDialog.visible = true
    }

          // 编辑角色
      const editRole = async (role) => {
        roleDialog.isEdit = true
        roleDialog.form = { 
          ...role,
          selectedPermissions: await getRolePermissions(role.role_id)
        }
        roleDialog.visible = true
      }

    // 编辑权限
    const editPermission = (permission) => {
      permissionDialog.isEdit = true
      permissionDialog.form = { ...permission }
      permissionDialog.visible = true
    }

          // 保存角色
      const saveRole = async () => {
        try {
          roleDialog.loading = true
          const roleData = {
            role_name: roleDialog.form.role_name,
            role_description: roleDialog.form.role_description,
            permission_ids: roleDialog.form.selectedPermissions
          }
          
          if (roleDialog.isEdit) {
            await authService.admin.updateRole(roleDialog.form.role_id, roleData)
            ElMessage.success('角色更新成功')
          } else {
            await authService.admin.createRole(roleData)
            ElMessage.success('角色创建成功')
          }
                  roleDialog.visible = false
        loadRoles()
        
        // 如果修改的是当前用户的角色，强制刷新页面
        if (roleDialog.isEdit && userStore.user?.role_name === roleDialog.form.role_name) {
          ElMessage.success('您的权限已更新，页面即将刷新')
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        } else if (roleDialog.isEdit) {
          // 提醒管理员权限已更新
          ElMessage.success(`角色"${roleDialog.form.role_name}"的权限已更新，相关用户需要刷新页面才能生效`)
        }
      } catch (error) {
        ElMessage.error(roleDialog.isEdit ? '角色更新失败' : '角色创建失败')
      } finally {
        roleDialog.loading = false
      }
      }

    // 保存权限
    const savePermission = async () => {
      try {
        permissionDialog.loading = true
        if (permissionDialog.isEdit) {
          await authService.admin.updatePermission(permissionDialog.form.permission_id, permissionDialog.form)
          ElMessage.success('权限更新成功')
        } else {
          await authService.admin.createPermission(permissionDialog.form)
          ElMessage.success('权限创建成功')
        }
        permissionDialog.visible = false
        loadPermissions()
      } catch (error) {
        ElMessage.error(permissionDialog.isEdit ? '权限更新失败' : '权限创建失败')
      } finally {
        permissionDialog.loading = false
      }
    }

    // 删除角色
    const deleteRole = async (role) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除角色 "${role.role_name}" 吗？`,
          '删除确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        await authService.admin.deleteRole(role.role_id)
        ElMessage.success('角色删除成功')
        loadRoles()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('角色删除失败')
        }
      }
    }

    // 删除权限
    const deletePermission = async (permission) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除权限 "${permission.permission_name}" 吗？`,
          '删除确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        await authService.admin.deletePermission(permission.permission_id)
        ElMessage.success('权限删除成功')
        loadPermissions()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('权限删除失败')
        }
      }
    }

    // 显示创建用户对话框
    const showCreateUserDialog = () => {
      userDialog.isEdit = false
      userDialog.form = {
        username: '',
        email: '',
        password: '',
        role_id: 2,
        is_active: true
      }
      currentEditUser.value = null
      userDialog.visible = true
    }

    // 编辑用户
    const editUser = (user) => {
      userDialog.isEdit = true
      userDialog.form = {
        email: user.email,
        role_id: user.role_name === 'admin' ? 1 : 2,
        is_active: user.is_active
      }
      currentEditUser.value = user
      userDialog.visible = true
    }

    // 保存用户
    const saveUser = async () => {
      if (!userFormRef.value) return
      
      try {
        await userFormRef.value.validate()
        userDialog.loading = true
        
        if (userDialog.isEdit) {
          // 更新用户
          await authService.admin.updateUser(currentEditUser.value.user_id, {
            email: userDialog.form.email,
            role_id: userDialog.form.role_id,
            is_active: userDialog.form.is_active
          })
          ElMessage.success('用户更新成功')
        } else {
          // 创建用户
          await authService.admin.createUser(userDialog.form)
          ElMessage.success('用户创建成功')
        }
        
        userDialog.visible = false
        loadUsers()
        
        // 如果修改的是当前用户，强制刷新页面
        if (userDialog.isEdit && currentEditUser.value?.user_id === userStore.user?.user_id) {
          ElMessage.success('您的账户信息已更新，页面即将刷新')
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        }
        
      } catch (error) {
        if (error.response && error.response.data) {
          ElMessage.error(error.response.data.detail || '操作失败')
        } else {
          ElMessage.error('操作失败，请重试')
        }
      } finally {
        userDialog.loading = false
      }
    }

    // 删除用户
    const deleteUser = async (user) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除用户 "${user.username}" 吗？此操作不可恢复。`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        
        await authService.admin.deleteUser(user.user_id)
        ElMessage.success('用户删除成功')
        loadUsers()
        
      } catch (error) {
        if (error !== 'cancel') {
          if (error.response && error.response.data) {
            ElMessage.error(error.response.data.detail || '删除失败')
          } else {
            ElMessage.error('删除失败，请重试')
          }
        }
      }
    }
    
    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      return new Date(dateString).toLocaleString('zh-CN')
    }
    
    onMounted(() => {
      loadUsers()
      loadRoles()
      loadPermissions() // Load permissions on mount
    })
    
    return {
      userStore,
      userFormRef,
      usersLoading,
      users,
      roles,
      permissions, // Expose permissions
      pagination,
      userDialog,
      loadUsers,
      showCreateUserDialog,
      editUser,
      saveUser,
      deleteUser,
      formatDate,
      activeMenu, // Expose activeMenu
      onMenuSelect, // Expose onMenuSelect
              roleDialog,
        allPermissionsSelected,
        toggleAllPermissions,
        getRolePermissions,
        showCreateRoleDialog,
        editRole,
        saveRole,
        deleteRole,
      permissionDialog,
      showCreatePermissionDialog,
      editPermission,
      savePermission,
      deletePermission
    }
  }
}
</script>

<style scoped>
.admin-page {
  min-height: calc(100vh - var(--header-height));
  background: var(--bg);
  padding: 20px;
}

.admin-layout {
  display: flex;
  gap: 20px;
  width: 100%;
  height: calc(100vh - var(--header-height) - 40px);
}

.admin-sidebar {
  width: 250px;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h3 {
  color: var(--text);
  margin: 0;
  font-weight: 600;
  text-align: center;
}

.sidebar-menu {
  border-right: none;
  background: transparent;
}

.admin-main {
  flex: 1;
  overflow: auto;
}

.content-section {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border);
}

.section-header h2 {
  color: var(--text);
  font-weight: 600;
  margin: 0;
}

.content-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* AI风格按钮 - 与项目其他页面保持一致 */
.admin-page :deep(.el-button--primary) {
  background-color: var(--accent);
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(61,85,236,.25);
  border-radius: 6px;
  font-weight: 500;
}

.admin-page :deep(.el-button--primary:hover) {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(61,85,236,.32);
}

.admin-page :deep(.el-button) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.admin-page :deep(.el-button--danger) {
  background-color: #ef4444;
  border: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.25);
}

.admin-page :deep(.el-button--danger:hover) {
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(239,68,68,.35);
}

.admin-page :deep(.el-button:not(.el-button--primary):not(.el-button--danger)) {
  background-color: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}

.admin-page :deep(.el-button:not(.el-button--primary):not(.el-button--danger):hover) {
  border-color: var(--accent);
  color: var(--accent);
  background-color: rgba(61,85,236,0.05);
}

/* 主要操作按钮 - 具有现代风格 */
.section-header .el-button--primary {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(61,85,236,.28);
}

.section-header .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(61,85,236,.35);
}

/* 权限选择样式 */
.permissions-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background-color: #fafbfc;
}

.permissions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--text);
}

.permissions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.permission-item {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.2s ease;
}

.permission-item:hover {
  border-color: var(--accent);
  background-color: rgba(61,85,236,0.02);
}

.permission-item.is-checked {
  border-color: var(--accent);
  background-color: rgba(61,85,236,0.05);
}

.permission-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-name {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
}

.permission-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
</style> 